﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%--Visual Data - visualize customer digital data
    Developed by: 
    Denzil Sequeira
    License: New BSD License (BSD) - https://visualdata.codeplex.com/license 
    Developer Team and followers: https://visualdata.codeplex.com/team/view --%>
<!DOCTYPE html>
<html>
<head>
	<title>Visual Data - visualize customer digital data</title>
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/highcharts-more.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
	<script src="Scripts/ajaxfileupload.js" type="text/javascript"></script>
	<link href="css/391924.css" rel="stylesheet" type="text/css" />
	<script>
	// <![CDATA[

		//		function filMyFile_onclick() {

		//		}

		// ]]>
	    $(document).ready(function () {

	        $('#cmdsend').bind('click', function (e) {
	            e.preventDefault();
	            var Title = document.getElementById('MyChartTitle').value;
	            if ($('#filMyFile').val() == '') {
	                alert("No file Selected For Display");

	            } else {
	                if ($('#filMyFile').val().indexOf(".csv") > -1) {
	                    $.ajaxFileUpload({
	                        url: './FileUpload.ashx',
	                        secureuri: false,
	                        fileElementId: 'filMyFile',
	                        dataType: 'json',
	                        data: { name: 'logan', id: 'id' },
	                        success: function (data) {
	                            if (typeof (data.error) != 'undefined') {
	                                if (data.error != '') {
	                                    //	                                    alert(data.error);
	                                } else {

	                                    //	                                    alert(data.msg);

	                                    var csvurl = data.msg.toString();
	                                    var options = {
	                                        chart: {
	                                            renderTo: 'content',
	                                            defaultSeriesType: 'column'
	                                        },
	                                        title: {
	                                            text: 'User-defined Chart'
	                                        },
	                                        xAxis: {
	                                            categories: []
	                                        },
	                                        yAxis: {
	                                            title: {
	                                                text: 'Units'
	                                            }
	                                        },
	                                        series: []
	                                    };

	                                    $.get(csvurl, function (data) {
	                                        // Split the lines
	                                        var lines = data.split('\n');
	                                        var items;
	                                        // Iterate over the lines and add categories or series
	                                        $.each(lines, function (lineNo, line) {
	                                            if (line.toString().length != 0) {
	                                                items = line.split(',');
	                                                if (items.length == 1) {
	                                                    items = line.split(';');
	                                                }

	                                                // header line containes categories
	                                                if (lineNo == 0) {
	                                                    $.each(items, function (itemNo, item) {
	                                                        if (itemNo > 0) options.xAxis.categories.push(item);
	                                                    });
	                                                }

	                                                // the rest of the lines contain data with their name in the first position
	                                                else {
	                                                    var series = {
	                                                        data: []
	                                                    };
	                                                    $.each(items, function (itemNo, item) {
	                                                        if (itemNo == 0) {
	                                                            series.name = item;
	                                                        } else {
	                                                            series.data.push(parseFloat(item));
	                                                        }
	                                                    });

	                                                    options.series.push(series);

	                                                }
	                                            }
	                                        });
	                                        if (Title.length > 0) {
	                                            options.title.text = Title;
	                                        }
	                                        // Create the chart
	                                        var chart = new Highcharts.Chart(options);
	                                    });







	                                }
	                            }
	                        }
	                    });

	                } else {
	                    alert("Only .csv files allowed.Please Try again Later");
	                    $('#filMyFile').val('');
	                }
	            }
	        });


	    });
	</script>
	<style type="text/css">
		.style1
		{
			height: 23px;
		}
	</style>
	<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="wrapper">
		<div id="contentliquid">
			<div id="contentwrap">
				<div id="content">
				</div>
			</div>
		</div>
		<div id="rightcolumnwrap">
			<div id="rightcolumn">
				<p>
					Select CSV file with Custom Data</p>
				<form id="Form1" method="post" runat="server" enctype="multipart/form-data">
				<p>
					Chart Title:
				</p>
				<p>
				    <asp:TextBox ID="MyChartTitle" runat="server" Width="417px"></asp:TextBox>
				</p>
				<p>
				</p>
				<p>
					Custom Data:
				</p>
				<p>
					<input id="filMyFile" type="file" runat="server" aria-busy="False" class="style1" />
					<button type="button" id="cmdsend">
						Send</button>
				</p>
				<p>
				</p>
				<p>
				</p>
				</form>
			</div>
		</div>
		<div id="footerwrap">
			<div id="footer">
				<p>
					CSS Layouts powered by <a href="http://www.cssportal.com" target="_blank">CSSPortal</a></p>
			</div>
		</div>
	</div>
</body>
</html>
